<template>
  <svg>
    <rect width="15" :height="config.mark.length*10+20" :x="config.x" :y="config.y" :style="{fill:'ghostWhite',stroke:'gray','stroke-width':'0.5'}"></rect>
    <circle v-for="(c,m) in config.mark" :k="'color'+m" :cx="parseInt(config.x)+7.5" :cy="parseInt(config.y)+5+m*10+(m+1)*5" r="5" stroke="white" stroke-width="0.5" :fill="c===signal[config.signal]?c:'gray'"/>
  </svg>
</template>

<script>
export default {
  name: "lampSvg",
  props:{
    config:{
      default:()=>{
        return {
          "x": 200,
          "y": 140,
          "mark": [
            "red",
            "yellow",
            "green"
          ],
          "signal": "mark1"
        }
      }
    },
    signal:{
      default:()=>{
        return {}
      }
    },
    transform:{
      default:()=> {
        return 'scale(1,1)'
      }
    },
  }
}
</script>

<style scoped>

</style>